<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>02_模板语法</title>
  </head>
  <body>
    <!--
      1. 模板的理解:
        动态的html页面
        包含了一些JS语法代码
          双大括号表达式
          指令(以v-开头的自定义标签属性)
      2. 双大括号表达式
        语法: {{exp}} 或 {{{exp}}}
        功能: 向页面输出数据
        可以调用对象的方法
      3. 指令一: 强制数据绑定
        功能: 指定变化的属性值
        完整写法:
          v-bind:xxx='yyy'  //yyy会作为表达式解析执行
        简洁写法:
          :xxx='yyy'
      4. 指令二: 绑定事件监听
        功能: 绑定指定事件名的回调函数
        完整写法:
          v-on:click='xxx'
        简洁写法:
          @click='xxx'
      -->
    <div id="app">
      <h2>1. 双大括号表达式</h2>
      <p>{{ num }}</p>
      <!-- 插值语法：只能用于标签内，不能用于标签属性 -->
      <!-- <input type="text" value={{num}}> -->
      <h2>2. 指令一: 强制数据绑定</h2>
      <!-- 单向数据绑定：Model -> View -->
      <input type="text" v-bind:value="num" />
      <input type="text" :value="num" />
      <h2>3. 指令二: 绑定事件监听</h2>
      <button v-on:click="handleClick">按钮</button>
      <div v-on:mousemove="handleClick">111111111122222</div>
      <button @click="handleClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      /*
        指令语法：
         1. v-model
          用于双向数据绑定
          常用于表单项
          v-model="xxx"
         2. v-bind
          用于单向数据绑定（强制绑定数据）
          常用于父子组件间通信
          v-bind:xxx="yyy"
          简写 :xxx="yyy"
         3. v-on
          用于绑定事件
          v-on:事件名="事件回调函数"
          简写 @事件名="事件回调函数"

        new Vue({})
          配置对象：
            el 获取DOM元素，解析其中模板语法
            data 定义非函数数据
            methods 定义函数数据
      */
      new Vue({
        el: "#app",
        // 定义的数据会直接在this上
        data: {
          // 定义非函数数据
          num: 0,
        },
        methods: {
          // 定义函数数据
          handleClick(event) {
            console.log(111, event);
            console.log(this);
          },
        },
      });
    </script>
  </body>
</html>
